/**
 * @author xu.yan
 * @time 2022-07-25 3 PM
 * @description 对vue脚手架进行配置
 */

const pxtorem = require('postcss-pxtorem') // 导入 px 转化为 rem 的包 (开发环境中使用)

module.exports = {

  lintOnSave: true,
  // 对 webpack-dev-server 这个开发服务器进行扩展配置
  devServer: {
    open: true,
    port: 3300,
    // Proxy: { // 反向代理配置
    //   '/前缀': {
    //     target: '', // 代理目标
    //     changeOrigin: true, // 跨域
    //     pathRewrite: { // 路径重写
    //       '^/前缀': '', // 将前缀的东西进行替换
    //     },
    //   },
    // },
  },
  // 多页配置
  pages: {
    // 模块机制，每一个模块下会有一个默认的地址(index),所有index配置是当前系统的默认应用
    // 每一个应用至少包含两个模板，html模板，js入口
    // 匹配规则： location.pathname.startsWith("/路由名")
    index: {
      // 指定html模板
      template: './public/index.html',
      // 指定js入口
      entry: './src/main.js',
    },
  },

  // 输出配置
  outputDir: 'dist',

  // 部署应用包时的基本 URL
  publicPath: '', // 配置为空字符串时，所有的资源都会被链接为相对路径

  // 与 css 相关的
  css: {
    loaderOptions: { // loader 选项
      postcss: { // 这里的选项会传递给 postcss-loader
        plugins: [ // 配置 css 相关插件的配置
          pxtorem({ // postcss-pxtorem 插件的配置
            rootValue: 37.5, // 设计稿的尺寸大小/10
            propList: ['*', '!font*'],
          }),
        ],
      },
    },
  },

}
